<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
			.pic_box {
				border: solid 6px red;
				position: relative;
				float: left;
			}

			.pic_box img {
				width: 500px;
				border: solid 2px greenyellow;
			}

			.nav {
				background: green;
				border: 1px solid gray;
				padding: 4px 12px;
				float: left;
				opacity: 0.6;
				position: absolute;
				bottom: 6px;
				right: 12px;
			}

			.nav a {
				float: left;
				display: block;
				height: 20px;
				line-height: 20px;
				width: 20px;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				text-align: center;
				background: blue;
				color: red;
				margin-right: 5px;
				text-decoration: none;
			}

			.nav a:hover {
				background: yellow;
				color: red;
			}
    </style>
</head>
<body>
<div class="pic_box">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547609306&di=12861a2ee9d0783ac94e3c9d870be45e&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F9834b81a8b5a95c66c4897866281c89ef6788343.jpg"/>
    <div class="nav">
        <a href="#1" class="links item first" title="first" target="_blank" id="first_id">1</a>
        <a href="#2" class="links active item" title="test" target="_blank" lang="zh">2</a>
        <a href="#2" class="links item" title="link" lang="zh-cn">3</a>
        <a href="#2" class="links item" target="_blank" lang="zh-tw">4</a>
        <a href="#2" class="links item" lang="zh-cn">福</a>
    </div>
</div>
</body>
</html>
